<!-- 我的订单列表 -->
<template>
	<view class="container">
		<view class="order_header">
			<uni-nav-bar left-icon="left" @clickLeft="back" :border="false" dark :background-color="transparentColor" status-bar title="我的订单" style="position: fixed; top: 0; left: 0; right: 0; z-index: 999;" />
		</view>
		<!-- 选项卡区域 -->
		<view class="order_main">
			<!-- 控制区域 -->
			<view class="order_options">
				<view :class="status == -1 ? 'checked' : ''" @click="optionChecked(-1)">
					全部
				</view>
				<view :class="status == 0 ? 'checked' : ''" @click="optionChecked(0)">
					待支付
				</view>
				<view :class="status == 1 ? 'checked' : ''" @click="optionChecked(1)">
					待使用
				</view>
				<view :class="status == 2 ? 'checked' : ''" @click="optionChecked(2)">
					待评价
				</view>
			</view>
			<!-- 内容区域 -->
			<!-- 全部 -->
			<view class="order_contain" v-if="status == -1" v-for="(item,index) in list" key="index">
				<view class="order_contain_list">
					<!-- 订单编号区域 -->
					<view class="order_contain_list_top">
						<view class="discount_coupon_containt_order_my">
							订单编号：24255252522
						</view>
						<navigator url="/pacakgeOrder/pages/orderAll/orderAll" class="discount_coupon_containt_order_count">
							<uni-icons type="right" color="#949494" size="18" style="vertical-align: middle;margin-top: -3rpx;"></uni-icons>
						</navigator>
					</view>
					<!-- 中间内容区域 -->
					<view class="order_contain_list_center">
						<view class="order_contain_list_center_one">
							服务项目：车辆保养
						</view>
						<view class="order_contain_list_center_two">
							<view class="order_contain_list_center_two_left">
								<text>服务门店：大宝车辆维修店</text>
								<img src="/static/plane@3x.png"/>
							</view>
							<!-- 待支付 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 0">
								待支付
							</view>
							<!-- 待使用 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 1">
								待使用
							</view>
							<!-- 待评价 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 2">
								待评价
							</view>
							<!-- 已取消 -->
							<view class="order_contain_list_center_two_right" :id="item.status == 3 ? 'order_contain_list_center_two_right_cancel' : ''" v-if="item.status == 3">
								已取消
							</view>
							<!-- 已退款 -->
							<view class="order_contain_list_center_two_right" :id="item.status == 4 ? 'order_contain_list_center_two_right_refund' : ''" v-if="item.status == 4">
								已退款
							</view>
							<!-- 已完成 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 5">
								已完成
							</view>
						</view>
						<view class="order_contain_list_center_three">
							下单时间：2023-03-12 12:09
						</view>
					</view>
					<!-- 下方功能区域 -->
					<view class="order_contain_list_bottom">
						<view class="order_contain_list_bottom_left">
							实付：230.56元
						</view>
						<!-- 待评价 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 0">
							<navigator url="/pacakgeOrder/pages/evaluatar/evaluatar" class="order_contain_list_bottom_right_evaluate">
								立即评价
							</navigator>
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 待支付 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 1">
							<view class="order_contain_list_bottom_right_evaluate">
								取消订单
							</view>
							<view class="order_contain_list_bottom_right_monad">
								立即支付
							</view>
						</view>
						<!-- 待使用 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 2">
							<view class="order_contain_list_bottom_right_evaluate">
								申请退款
							</view>
							<view class="order_contain_list_bottom_right_monad">
								扫码结算
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 3">
							<view class="order_contain_list_bottom_right_monad">
								重新下单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 4">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 5">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 待支付 -->
			<view class="order_contain" v-if="status == 0" v-for="(item,index) in list" key="index">
				<view class="order_contain_list">
					<!-- 订单编号区域 -->
					<view class="order_contain_list_top">
						<view class="discount_coupon_containt_order_my">
							订单编号：24255252522
						</view>
						<navigator url="/pacakgeOrder/pages/orderAll/orderAll" class="discount_coupon_containt_order_count">
							<uni-icons type="right" color="#949494" size="18" style="vertical-align: middle;margin-top: -3rpx;"></uni-icons>
						</navigator>
					</view>
					<!-- 中间内容区域 -->
					<view class="order_contain_list_center">
						<view class="order_contain_list_center_one">
							服务项目：车辆保养
						</view>
						<view class="order_contain_list_center_two">
							<view class="order_contain_list_center_two_left">
								<text>服务门店：大宝车辆维修店</text>
								<img src="/static/plane@3x.png"/>
							</view>
							<!-- 待支付 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 0">
								待支付
							</view>
							<!-- 待使用 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 1">
								待使用
							</view>
							<!-- 待评价 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 2">
								待评价
							</view>
							<!-- 已取消 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 3">
								已取消
							</view>
							<!-- 已退款 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 4">
								已退款
							</view>
							<!-- 已完成 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 5">
								已完成
							</view>
						</view>
						<view class="order_contain_list_center_three">
							下单时间：2023-03-12 12:09
						</view>
					</view>
					<!-- 下方功能区域 -->
					<view class="order_contain_list_bottom">
						<view class="order_contain_list_bottom_left">
							实付：<text>230.56元</text>
						</view>
						<!-- 待评价 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 0">
							<navigator url="/pacakgeOrder/pages/evaluatar/evaluatar" class="order_contain_list_bottom_right_evaluate">
								立即评价
							</navigator>
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 待支付 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 1">
							<view class="order_contain_list_bottom_right_evaluate">
								取消订单
							</view>
							<view class="order_contain_list_bottom_right_monad">
								立即支付
							</view>
						</view>
						<!-- 待使用 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 2">
							<view class="order_contain_list_bottom_right_evaluate">
								申请退款
							</view>
							<view class="order_contain_list_bottom_right_monad">
								扫码结算
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 3">
							<view class="order_contain_list_bottom_right_monad">
								重新下单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 4">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 5">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 待使用 -->
			<view class="order_contain" v-if="status == 1" v-for="(item,index) in list" key="index">
				<view class="order_contain_list">
					<!-- 订单编号区域 -->
					<view class="order_contain_list_top">
						<view class="discount_coupon_containt_order_my">
							订单编号：24255252522
						</view>
						<navigator url="/pacakgeOrder/pages/orderAll/orderAll" class="discount_coupon_containt_order_count">
							<uni-icons type="right" color="#949494" size="18" style="vertical-align: middle;margin-top: -3rpx;"></uni-icons>
						</navigator>
					</view>
					<!-- 中间内容区域 -->
					<view class="order_contain_list_center">
						<view class="order_contain_list_center_one">
							服务项目：车辆保养
						</view>
						<view class="order_contain_list_center_two">
							<view class="order_contain_list_center_two_left">
								<text>服务门店：大宝车辆维修店</text>
								<img src="/static/plane@3x.png"/>
							</view>
							<!-- 待支付 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 0">
								待支付
							</view>
							<!-- 待使用 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 1">
								待使用
							</view>
							<!-- 待评价 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 2">
								待评价
							</view>
							<!-- 已取消 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 3">
								已取消
							</view>
							<!-- 已退款 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 4">
								已退款
							</view>
							<!-- 已完成 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 5">
								已完成
							</view>
						</view>
						<view class="order_contain_list_center_three">
							下单时间：2023-03-12 12:09
						</view>
					</view>
					<!-- 下方功能区域 -->
					<view class="order_contain_list_bottom">
						<view class="order_contain_list_bottom_left">
							实付：<text>230.56元</text>
						</view>
						<!-- 待评价 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 0">
							<navigator url="/pacakgeOrder/pages/evaluatar/evaluatar" class="order_contain_list_bottom_right_evaluate">
								立即评价
							</navigator>
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 待支付 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 1">
							<view class="order_contain_list_bottom_right_evaluate">
								取消订单
							</view>
							<view class="order_contain_list_bottom_right_monad">
								立即支付
							</view>
						</view>
						<!-- 待使用 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 2">
							<view class="order_contain_list_bottom_right_evaluate">
								申请退款
							</view>
							<view class="order_contain_list_bottom_right_monad">
								扫码结算
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 3">
							<view class="order_contain_list_bottom_right_monad">
								重新下单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 4">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 5">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 待评价 -->
			<view class="order_contain" v-if="status == 2" v-for="(item,index) in list" key="index">
				<view class="order_contain_list">
					<!-- 订单编号区域 -->
					<view class="order_contain_list_top">
						<view class="discount_coupon_containt_order_my">
							订单编号：24255252522
						</view>
						<navigator url="/pacakgeOrder/pages/orderAll/orderAll" class="discount_coupon_containt_order_count">
							<uni-icons type="right" color="#949494" size="18" style="vertical-align: middle;margin-top: -3rpx;"></uni-icons>
						</navigator>
					</view>
					<!-- 中间内容区域 -->
					<view class="order_contain_list_center">
						<view class="order_contain_list_center_one">
							服务项目：车辆保养
						</view>
						<view class="order_contain_list_center_two">
							<view class="order_contain_list_center_two_left">
								<text>服务门店：大宝车辆维修店</text>
								<img src="/static/plane@3x.png"/>
							</view>
							<!-- 待支付 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 0">
								待支付
							</view>
							<!-- 待使用 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 1">
								待使用
							</view>
							<!-- 待评价 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 2">
								待评价
							</view>
							<!-- 已取消 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 3">
								已取消
							</view>
							<!-- 已退款 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 4">
								已退款
							</view>
							<!-- 已完成 -->
							<view class="order_contain_list_center_two_right" v-if="item.status == 5">
								已完成
							</view>
						</view>
						<view class="order_contain_list_center_three">
							下单时间：2023-03-12 12:09
						</view>
					</view>
					<!-- 下方功能区域 -->
					<view class="order_contain_list_bottom">
						<view class="order_contain_list_bottom_left">
							实付：230.56元
						</view>
						<!-- 待评价 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 0">
							<navigator url="/pacakgeOrder/pages/evaluatar/evaluatar" class="order_contain_list_bottom_right_evaluate">
								立即评价
							</navigator>
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 待支付 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 1">
							<view class="order_contain_list_bottom_right_evaluate">
								取消订单
							</view>
							<view class="order_contain_list_bottom_right_monad">
								立即支付
							</view>
						</view>
						<!-- 待使用 -->
						<view class="order_contain_list_bottom_right" v-if="item.status == 2">
							<view class="order_contain_list_bottom_right_evaluate">
								申请退款
							</view>
							<view class="order_contain_list_bottom_right_monad">
								扫码结算
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 3">
							<view class="order_contain_list_bottom_right_monad">
								重新下单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 4">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
						<!-- 已取消 -->
						<view class="order_contain_list_bottom_right_else" v-if="item.status == 5">
							<view class="order_contain_list_bottom_right_monad">
								再来一单
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				transparentColor: '#2D81F9' ,// 将顶部导航栏的颜色设为透明
				status: '-1',
				list: [
					{status: '0'},
					{status: '1'},
					{status: '2'},
					{status: '3'},
					{status: '4'},
					{status: '5'},
					{status: '0'},
					{status: '1'},
					{status: '2'},
					{status: '3'},
				],
			}
		},
		methods: {
			optionChecked(val) {
				this.status = val
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
.container {
	background-color: #F7F7F7;
}
.order_header {
	height: 400rpx;
	background-image: linear-gradient(to bottom, #3789FF, #0863E5);
}

/* 主体内容区域开始 */
.order_main {
	padding: 30rpx 20rpx;
	position: relative;
	top: -300rpx;
}
.order_options {
	display: flex;
	justify-content: space-around;
}
.order_options>view {
	height: 60rpx;
	width: 110rpx;
	font-size: 32rpx;
	color: #fff;
	text-align: center;
}
.checked {
	border-bottom: 4rpx solid #fff; /* 选项卡选中样式 */
}
.order_contain {
	padding-top: 20rpx;
}
.order_contain_list {
	padding: 20rpx 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
}
/* 主体内容区域结束 */

/* 内容区域开始 */
/* 内容头部区域开始 */
.order_contain_list_top {
	display: flex;
	justify-content: space-between;
	padding-bottom: 10rpx;
	border-bottom: 6rpx solid #F7F7F7;
	font-size: 28rpx;
}
.uni-icons {
	margin-right: 8rpx;
}
/* 内容头部区域结束 */

/* 内容中间区域开始 */
.order_contain_list_center {
	padding: 16rpx 0;
	font-size: 26rpx;
	border-bottom: 2rpx solid #F7F7F7;
}
.order_contain_list_center>view {
	height: 56rpx;
	line-height: 56rpx;
}
.order_contain_list_center_two {
	display: flex;
}
.order_contain_list_center_two_left {
	width: 530rpx;
}
.order_contain_list_center_two_left>text {
	margin-right: 20rpx;
}
.order_contain_list_center_two_left>img {
	width: 26rpx;
	height: 26rpx;
	vertical-align: middle;
}
.order_contain_list_center_two_right {
	color: #1E72F0;
	font-weight: 600;
}
#order_contain_list_center_two_right_cancel {
	color: #A0A0A0;
}
#order_contain_list_center_two_right_refund {
	color: #A0A0A0;
}
/* 内容中间区域结束 */

/* 内容底部区域开始 */
.order_contain_list_bottom {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	font-size: 28rpx;
}
.order_contain_list_bottom_right {
	width: 280rpx;
	display: flex;
	justify-content: space-between;
}
.order_contain_list_bottom_right_evaluate,.order_contain_list_bottom_right_monad {
	width: 130rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	border-radius: 10rpx;
}
.order_contain_list_bottom_right_evaluate {
	background-color: #BFBFBF;
	color: #fff;
	font-size: 22rpx;
}
.order_contain_list_bottom_right_monad {
	background-color: #1E72F0;
	color: #fff;
	font-size: 22rpx;
}
.order_contain_list_bottom_right_else>view {
	width: 130rpx;
	height: 50rpx;
	text-align: center;
	line-height: 50rpx;
	border-radius: 10rpx;
}
.order_contain_list_bottom_left>text {
	color: #FF4000;
}
/* 内容底部区域结束 */
/* 内容区域结束 */
</style>
